<template>
  <div class="find">
    <!-- 头部 -->
    <div class="hearer">
      <div class="search">
        <Search />
      </div>
      <img src="@/images/扫描二维码.png" alt="" />
    </div>
    
    <div class="content">
      <!-- 侧边导航栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item, index) in vanList"
          :key="index"
          :title="item.title"
          :to="item.name"
        ></van-sidebar-item>
      </van-sidebar>
      <!-- 子路由 -->
      <router-view></router-view>
    </div>
    <!-- 底部导航 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Search from "@/components/search.vue";
import Footer from "@/components/footer.vue";
export default {
  name: "Find",
  components: { Search ,Footer},
  data() {
    return {
      activeKey: 0,
      // "热门搜索","原创","主题","壁纸","头像","表情","影视","动漫","爱豆","动图","文字","素材","萌宠","绘画","手作","时尚","美妆","婚礼","美食","家居","旅行","摄影"
      vanList: [
        { title: "热门搜索", name: "/find/hot" },
        { title: "原创", name: "/find/original" },
        { title: "主题", name: "/find/theme" },
        { title: "壁纸", name: "/find/hot" },
        { title: "头像", name: "/find/hot" },
        { title: "表情", name: "/find/hot" },
        { title: "影视", name: "/find/hot" },
        { title: "动漫", name: "/find/theme" },
        { title: "爱豆", name: "/find/hot" },
        { title: "动图", name: "/find/hot" },
        { title: "文字", name: "/find/hot" },
        { title: "素材", name: "/find/hot" },
        { title: "萌宠", name: "/find/hot" },
        { title: "绘画", name: "/find/hot" },
        { title: "手作", name: "/find/hot" },
        { title: "时尚", name: "/find/hot" },
        { title: "美妆", name: "/find/hot" },
        { title: "婚礼", name: "/find/hot" },
        { title: "美食", name: "/find/hot" },
        { title: "家居", name: "/find/hot" },
        { title: "旅行", name: "/find/hot" },
        { title: "摄影", name: "/find/hot" },
      ],
    };
  },
};
</script>
<style lang="less" scoped>

.hearer {
  display: flex;
  justify-content: space-between;
  justify-items: center;
  img {
    width: 25px;
    height: 25px;
    padding: 10px 12px;
  }
  .search {
    flex: 1;
  }
}
.content {
  display: flex;
  overflow-y: hidden;
  padding-bottom: 30px;
}
.van-sidebar {
    overflow-y: initial;
    background-color: #f7f8fa;
}
.van-sidebar-item--select {
  color: #f56555;
  width: 80px;
}
</style>
